<template>
  <div style="padding: 20px">
    <Alert message="结构树示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">树菜单</div>
    <div class="demoTittle2">树菜单常用于多层级关系，使用tree组件</div>
    <a-space :size="54">
      <div class="tree">
        <div class="tree-header">
          <div class="tree-header_title">检查表管理</div>
          <div class="tree-header_add">
            <a-button :icon="h(PlusOutlined)">
              <span class="tree-header_add_text">新增</span>
            </a-button>
          </div>
        </div>
        <div class="tree-body">
          <a-menu>
            <a-menu-item :key="1" @mouseenter="enter(1)" @mouseleave="leave(1)">
              <div :class="showFlag ? 'tree-body_item' : ''">
                <div>专项检查表</div>
                <div>
                  <FormOutlined />
                  <DeleteOutlined />
                </div>
              </div>
            </a-menu-item>
            <a-menu-item :key="2" @mouseenter="enter(2)" @mouseleave="leave(2)">
              <div :class="showFlag2 ? 'tree-body_item' : ''">
                <div>春季巡查表</div>
                <div>
                  <FormOutlined />
                  <DeleteOutlined />
                </div>
              </div>
            </a-menu-item>
            <a-menu-item :key="3" @mouseenter="enter(3)" @mouseleave="leave(3)">
              <div :class="showFlag3 ? 'tree-body_item' : ''">
                <div>夏季巡查表</div>
                <div>
                  <FormOutlined />
                  <DeleteOutlined />
                </div>
              </div>
            </a-menu-item>
            <a-menu-item :key="4" @mouseenter="enter(4)" @mouseleave="leave(4)">
              <div :class="showFlag4 ? 'tree-body_item' : ''">
                <div>日常巡查表</div>
                <div>
                  <FormOutlined />
                  <DeleteOutlined />
                </div>
              </div>
            </a-menu-item>
          </a-menu>
        </div>
      </div>
      <div class="tree">
        <div class="tree-header">
          <div class="tree-header_title">备件库</div>
          <div class="tree-header_add">
            <a-button :icon="h(PlusOutlined)">
              <span class="tree-header_add_text">新增</span>
            </a-button>
          </div>
        </div>
        <div class="tree-body">
          <div style="margin-bottom: 8px">
            <a-input
              v-model:value="searchValue"
              placeholder="备件库搜索"
              style="margin: 0 4px; width: 95%"
            >
              <template #suffix>
                <icon-font
                  script-url="//at.alicdn.com/t/c/font_3787866_p7m34cfngla.js"
                  type="icon-search"
                  size="20"
                  color="#0052D9"
                />
              </template>
            </a-input>
          </div>

          <a-tree :tree-data="treeData">
            <template #title="{ key: treeKey, title }">
              <a-dropdown :trigger="['contextmenu']">
                <span>{{ title }}</span>
                <template #overlay>
                  <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
                    <a-menu-item key="1">
                      <div style="display: flex">
                        <a-space :size="8">
                          <icon-font
                            script-url="//at.alicdn.com/t/c/font_3787866_p7m34cfngla.js"
                            type="icon-jiegoushuguanliqi"
                            size="18"
                          />添加子级备件库
                        </a-space>
                      </div>
                    </a-menu-item>
                    <a-menu-item key="2"
                      ><div style="display: flex">
                        <a-space :size="10">
                          <icon-font
                            script-url="//at.alicdn.com/t/c/font_3787866_p7m34cfngla.js"
                            type="icon-xiugai"
                            size="14"
                          />修改名称
                        </a-space>
                      </div></a-menu-item
                    >
                    <a-menu-item key="3"
                      ><div style="display: flex">
                        <a-space :size="10"
                          ><icon-font
                            script-url="//at.alicdn.com/t/c/font_3787866_p7m34cfngla.js"
                            type="icon-shangyi"
                            size="16"
                          />上移
                        </a-space>
                      </div></a-menu-item
                    >
                    <a-menu-item key="4"
                      ><div style="display: flex">
                        <a-space :size="10"
                          ><icon-font
                            script-url="//at.alicdn.com/t/c/font_3787866_p7m34cfngla.js"
                            type="icon-moveB"
                            size="16"
                          />下移
                        </a-space>
                      </div></a-menu-item
                    >
                    <a-menu-item key="5"
                      ><div style="display: flex">
                        <a-space :size="10"
                          ><icon-font
                            script-url="//at.alicdn.com/t/c/font_3787866_p7m34cfngla.js"
                            type="icon-shanchu"
                            size="14"
                          />删除
                        </a-space>
                      </div></a-menu-item
                    >
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </a-tree>
        </div>
      </div>
    </a-space>
    <div class="demoTittle">组织结构树</div>
    <div class="demoTittle2">组织结构树使用tree组件的多选，属性checkable</div>
    <a-space :size="54">
      <div class="tree">
        <div class="tree-body">
          <a-tree
            v-model:expandedKeys="expandedKeys"
            v-model:selectedKeys="selectedKeys"
            v-model:checkedKeys="checkedKeys"
            checkable
            show-icon
            :tree-data="treeData2"
          >
          </a-tree>
        </div>
      </div>
    </a-space>
    <div class="demoTittle">节点懒加载</div>
    <div class="demoTittle2">添加属性load-data</div>
    <div class="tree">
      <div class="tree-body">
        <a-tree
          v-model:expandedKeys="expandedKeys2"
          v-model:selectedKeys="selectedKeys2"
          :load-data="onLoadData"
          :tree-data="treeData3"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { h, ref, type Ref } from 'vue';
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import { IconFont } from '@/components/basic/iconfont';
  import type { TreeProps } from 'ant-design-vue';
  import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';

  const showFlag = ref<Boolean>(false);
  const showFlag2 = ref<Boolean>(false);
  const showFlag3 = ref<Boolean>(false);
  const showFlag4 = ref<Boolean>(false);
  const searchValue = ref<string>('');

  //树
  const expandedKeys = ref<(string | number)[]>(['0-0', '0-0-3']);
  const selectedKeys = ref<(string | number)[]>(['0-0-0', '0-0-3-0', '0-2-1']);
  const checkedKeys = ref<(string | number)[]>(['0-0-0', '0-0-3-0', '0-2-1']);

  const treeData: Ref<TreeProps['treeData']> = ref([
    {
      title: '一级备件',
      key: '0-0',
      children: [
        {
          title: '二级备件',
          key: '0-0-0',
          children: [
            { title: '三级备件', key: '0-0-0-0' },
            { title: '三级备件', key: '0-0-0-1' },
            { title: '三级备件', key: '0-0-0-2' },
          ],
        },
        {
          title: '二级备件',
          key: '0-0-1',
          children: [{ key: '0-0-1-0', title: '三级备件' }],
        },
      ],
    },
    {
      title: '一级备件',
      key: '0-1',
      children: [
        {
          title: '二级备件',
          key: '0-1-0',
          children: [
            { title: '三级备件', key: '0-1-0-0' },
            { title: '三级备件', key: '0-1-0-1' },
            { title: '三级备件', key: '0-1-0-2' },
          ],
        },
        {
          title: '二级备件',
          key: '0-1-1',
          children: [{ key: '0-1-1-0', title: '三级备件' }],
        },
      ],
    },
  ]);

  const treeData2: Ref<TreeProps['treeData']> = ref([
    {
      title: '系统管理',
      key: '0-0',
      children: [
        {
          title: '用户管理',
          key: '0-0-0',
          children: [
            { title: '小王', key: '0-0-0-0' },
            { title: '小吴', key: '0-0-0-1' },
            { title: '小赵', key: '0-0-0-2' },
          ],
        },
        {
          title: '菜单管理',
          key: '0-0-1',
          children: [{ key: '0-0-1-0', title: '工作台' }],
        },
        {
          title: '用户管理',
          key: '0-0-2',
          children: [{ key: '0-0-2-0', title: '123' }],
        },
        {
          title: '角色管理',
          key: '0-0-3',
          children: [
            { key: '0-0-3-0', title: '管理员' },
            { key: '0-0-3-1', title: '超级管理员' },
          ],
        },
        {
          title: '菜单管理',
          key: '0-0-4',
          children: [{ key: '0-0-4-0', title: '哈哈哈' }],
        },
      ],
    },
    {
      title: '系统工具',
      key: '0-1',
      children: [
        {
          title: '二级',
          key: '0-1-0',
          children: [
            { title: '三级1', key: '0-1-0-0' },
            { title: '三级2', key: '0-1-0-1' },
            { title: '三级3', key: '0-1-0-2' },
          ],
        },
        {
          title: '二级',
          key: '0-1-1',
          children: [{ key: '0-1-1-0', title: '三级1' }],
        },
      ],
    },
    {
      title: '系统监控',
      key: '0-2',
      children: [
        {
          title: '二级',
          key: '0-2-0',
          children: [
            { title: '三级1', key: '0-2-0-0' },
            { title: '三级2', key: '0-2-0-1' },
            { title: '三级3', key: '0-2-0-2' },
          ],
        },
        {
          title: '二级',
          key: '0-2-1',
          children: [{ key: '0-2-1-0', title: '三级1' }],
        },
      ],
    },
  ]);

  const expandedKeys2 = ref<string[]>([]);
  const selectedKeys2 = ref<string[]>([]);
  const treeData3 = ref([
    {
      title: '合同类',
      key: '0-0',
      children: [
        {
          title: '财务类',
          key: '0-0-0',
          children: [
            {
              title: '投资类',
              key: '0-0-0-0',
              children: [
                { title: '投资合同', key: '0-0-0-0-0' },
                { title: '对公付款合同', key: '0-0-0-0-1' },
                { title: '融资合同', key: '0-0-0-0-2' },
              ],
            },
            { title: '经销类', key: '0-0-0-1' },
            { title: '报销类', key: '0-0-0-2' },
          ],
        },
        {
          title: '人事类',
          key: '0-0-1',
          children: [{ key: '0-0-1-0', title: '三级备件' }],
        },
      ],
    },
  ]);
  const onLoadData: TreeProps['loadData'] = (treeNode) => {
    return new Promise<void>((resolve) => {
      if (treeNode.dataRef?.children) {
        resolve();
        return;
      }
      setTimeout(() => {
        treeNode.dataRef!.children = [
          { title: 'Child Node', key: `${treeNode.eventKey}-0` },
          { title: 'Child Node', key: `${treeNode.eventKey}-1` },
        ];
        treeData3.value = [...treeData3.value];
        resolve();
      }, 1000);
    });
  };

  const onContextMenuClick = (treeKey: string, menuKey: string | number) => {
    console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
  };

  const enter = (index) => {
    setTimeout(() => {
      if (index == 1) {
        showFlag.value = true;
      } else if (index == 2) {
        showFlag2.value = true;
      } else if (index == 3) {
        showFlag3.value = true;
      } else if (index == 4) {
        showFlag4.value = true;
      }
    }, 200);
  };
  const leave = (index) => {
    setTimeout(() => {
      if (index == 1) {
        showFlag.value = false;
      } else if (index == 2) {
        showFlag2.value = false;
      } else if (index == 3) {
        showFlag3.value = false;
      } else if (index == 4) {
        showFlag4.value = false;
      }
    }, 200);
  };
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
    margin-bottom: 18px;
  }
  .tree {
    width: 180px;
    height: 200px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    overflow-y: auto;

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 8px;

      &_title {
        color: #222222;
        font-size: 16px;
      }

      &_add {
        :deep(.ant-btn) {
          padding: 2px 8px;
          height: 28px;
        }
        .ant-btn > span {
          color: #0052d9;
        }
        &_text {
          color: #0052d9;
        }
      }
    }
    &-body {
      padding: 0 4px;
      :deep(.ant-menu-light.ant-menu-root.ant-menu-vertical) {
        border-inline-end: none;
      }
      :deep(.ant-menu .ant-menu-item:hover) {
        background-color: #f2f6fc;
      }
      :deep(.ant-menu-light) {
        color: #666666;
        font-size: 14px;
      }
      :deep(.ant-menu-light .ant-menu-item-selected) {
        color: #0052d9;
        background-color: #f2f6fc;
      }

      :deep(.ant-tree-treenode) {
        width: 100%;
        padding: 9px 0;
        border-radius: 4px;
      }
      :deep(.ant-tree-treenode:hover) {
        background-color: #f2f6fc;
      }
      :deep(.ant-tree-node-content-wrapper:has(.ant-tree-treenode:hover)) {
        background-color: #f2f6fc;
      }
      :deep(.ant-tree-switcher:has(.ant-tree-treenode:hover)) {
        background-color: #f2f6fc;
      }
      :deep(.ant-tree-node-content-wrapper:hover) {
        background-color: #f2f6fc;
      }
      :deep(.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected) {
        background-color: transparent;
      }
      :deep(.ant-tree-treenode.ant-tree-treenode-selected) {
        background-color: #f2f6fc;
        color: #0052d9;
        border-radius: 4px;
      }

      &_item {
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>
